<template>
  <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
  initStats,
  initRenderer,
  initCamera,
  addHouseAndTree,
  initDefaultLighting,
  initDefaultDirectionalLighting
} from "../../scripts/util";
import * as dat from "dat.gui";
let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;


onMounted(() => {
  const threeBox = document.getElementById("three-box");
  // use the defaults
  //   var stats = initStats(threeBox);
  var renderer = initRenderer(threeBox, THREE);
  var camera = initCamera(threeBox, THREE);

  renderer.shadowMap.enabled = true;
  // create a scene, that will hold all our elements such as objects, cameras and lights.
  var scene = new THREE.Scene();
  // initDefaultDirectionalLighting(THREE,scene)
  const control = new OrbitControls(camera, renderer.domElement); //鼠标交互、左键移动场景、滚轮放大缩小、右键平移

  control.enableRotate =true; //启用旋转
control.enablePan = true; //启用平移
control.enableZoom =true; //启用缩放





    let dlight = new THREE.DirectionalLight(0xffffff);
    dlight.intensity = 0.8
    dlight.shadow.mapSize.width = threeBox.clientWidth;
    dlight.shadow.mapSize.height = threeBox.clientHeight;

    dlight.shadow.camera.left = -200;
    dlight.shadow.camera.right = 200;
    dlight.shadow.camera.top = 200;
    dlight.shadow.camera.bottom = -200;
    dlight.castShadow = true
    dlight.position.set(50, 200, -200)
    scene.add(dlight);
//     const dLightHelper = new THREE.DirectionalLightHelper(dlight, 10);
// scene.add(dLightHelper);
  


//     let slight = new THREE.PointLight(0xffffff);

//     // slight.position.set(300,300,330)
// //       // 光源辅助观察
// // const sLightHelper = new THREE.PointLightHelper(slight, 10);
// // scene.add(sLightHelper);
//     scene.add(slight);

  // add spotlight for the shadows
  // var spotLight = new THREE.SpotLight(0xffffff, 1, 180, Math.PI / 4);
  // spotLight.shadow.mapSize.set(2048, 2048);
  // spotLight.position.set(-30, 40, -10);
  // spotLight.castShadow = true;
  // scene.add(spotLight);

//   var pointColor = "#ccc";
//   var pointLight = new THREE.PointLight(pointColor,1.0);
//   // pointLight.decay = 0.1
//   pointLight.postion =  new THREE.Vector3(1, 40, 110);
//   pointLight.castShadow = true;
 

// //   // 光源辅助观察
// const spotLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(spotLightHelper);
// scene.add(pointLight);

  // add a simple scene
  addHouseAndTree(THREE, scene);

  // add controls
  // var controls = setupControls();

  // call the render function
  render();

  function render() {
    // stats.update();
    requestAnimationFrame(render);
    control.update();
    renderer.render(scene, camera);
  }

  // function setupControls() {
  //   var controls = new (function () {
  //     this.intensity = ambientLight.intensity;
  //     this.ambientColor = ambientLight.color.getStyle();
  //     this.disableSpotlight = false;
  //   })();

  //   var gui = new dat.GUI();
  //   gui.add(controls, "intensity", 0, 3, 0.1).onChange(function (e) {
  //     ambientLight.color = new THREE.Color(controls.ambientColor);
  //     ambientLight.intensity = controls.intensity;
  //   });
  //   gui.addColor(controls, "ambientColor").onChange(function (e) {
  //     ambientLight.color = new THREE.Color(controls.ambientColor);
  //     ambientLight.intensity = controls.intensity;
  //   });
  //   gui.add(controls, "disableSpotlight").onChange(function (e) {
  //     spotLight.visible = !e;
  //   });

  //   return controls;
  // }
});
</script>

<style>
.three-box {
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  width: 100%;
}
</style>